<template>
  <view class="house">
    <none-data v-if="roomList.length == 0" />
    <view class="house-box" v-for="item in roomList" :key="item.accountNumber">
      <h4 class="house-title">基本信息</h4>
      <up-cell-group :border="false">
        <up-cell title="姓名" :value="item.name"></up-cell>
        <up-cell title="电话" :value="item.phone"></up-cell>
        <up-cell title="房屋类型" :value="item.smallHouseTypeName"></up-cell>
        <up-cell title="户号" :value="item.accountNumber"></up-cell>
        <up-cell title="租聘时限" :value="item.leaseDuration"></up-cell>
      </up-cell-group>
    </view>
    <view class="tail" v-if="roomList.length !== 0">
      {{ tailText }}
    </view>
  </view>
</template>

<script setup>
import { getRoomInfoApi } from "@/package_kuafu_apartment/pages/api/house";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";
const current = ref(1);
const pageSize = ref(10);
const total = ref([]);
const roomList = ref([]);
const tailText = ref("");

async function getRoomInfo() {
  let pageData = {
    page: current.value,
    size: pageSize.value,
  };
  const res = await getRoomInfoApi(pageData);
  if (res.data.records) {
    roomList.value = res.data.records;
    total.value = res.data.total;
    if (total.value !== roomList.value.length) {
      tailText.value = "下滑加载更多";
    } else {
      tailText.value = "没有更多内容";
    }
  }
}
onLoad(() => {
  getRoomInfo();
});
onReachBottom(() => {
  if (total.value !== roomList.value.length) {
    current.value++;
    getRoomInfo();
  }
});
</script>

<style lang="less" scoped>
.house {
  .house-box {
    width: 85vw;
    background: #ffffff;
    box-shadow: 0rpx 5rpx 13rpx 1rpx #0000000d;
    border-radius: 33rpx;
    margin: 0 auto;
    padding: 30rpx;
    margin-top: 30rpx;
    .house-title {
      font-family: "ali-m";
      font-weight: 500;
      font-size: 30rpx;
      color: #313233;
    }
    :deep(.u-cell__body) {
      padding-left: 0;
    }
  }
  .tail {
    text-align: center;
    font-size: 25rpx;
    height: 130rpx;
    line-height: 100rpx;
  }
}
</style>